<template>
  <div class="tuijianlan tanxin">
    <ul class="tanxin">
      <li class="tanxin" v-for="item in remen" :key="item">
        <div></div>
        {{ item }}
      </li>
    </ul>
    <span>更多 &rarr;</span>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["remen"],
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.tuijianlan {
  width: 730px;
  height: 55px;

  margin: 0 20px;
  padding: 0 10px;
  border-bottom: 3px solid @red;
  ul {
    justify-content: flex-start;

    li {
      margin-top: 20px;
      height: 20px;
      margin-right: 20px;
      border-right: 2px solid #ccc;
      padding-right: 20px;
      &:nth-child(1) {
        border: none;
      }
      &:nth-last-child(1) {
        border: none;
      }
      &:first-of-type {
        div {
          width: 8px;
          height: 8px;
          border: 3px solid @red;
          border-radius: 50%;
          text-align: center;
          color: @red;
          margin-top: 5px;
          margin-right: 5px;
        }
      }
    }
  }
  span {
    font-size: 10px;
    color: @red;
    line-height: 55px;
    margin-right: 5px;
  }
}
</style>